<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习5使用jQuery制作游戏角色</title>
	<!-- 219970720刘莹 -->
    <style>
        *{
        	margin: 0;
        	padding: 0;
        	background-color: black;
        }
        #total{
            width: 100vw;
            height: 100vh;
            cursor: pointer;//鼠标放上去时变小手
        }
        #img{
			width: 100px;
			height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
        }
		#img img{
			width: 100px;
            height: 100px;
			background-size: cover;/* 保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 */
		}
    </style>
</head>
<body>
    <div id="total">
        <div id="img">
			<img src="player_right.gif">
		</div>
    </div>
    <script src="jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function () {
            // 获取角色和total的jQuery对象
            var img = $("#img");
            var total = $("#total");
			
            //单击时触发的事件
            total.on('click', function (e) {
            img.stop(); // 停止所有的动画效果

            // 获得total的偏移量
            var totalOffset = total.offset();
			
			//获得点击位置
            var clickX = e.pageX - totalOffset.left;
            var clickY = e.pageY - totalOffset.top;

            // 获得角色当前的位置和目标位置
            var currentX = parseInt(img.css('left'));
            var targetX = clickX - img.width() / 2;

            // 判断目标位置与当前位置，决定使用哪张图片
            if (targetX < currentX) {
                $("img").attr("src","player_left.gif");
            } else {
                $("img").attr("src","player_right.gif");
            }

			// 角色移动动画
            img.animate({ top: clickY - img.height() / 2, left: clickX - img.width() / 2 }, 2500);
            });

            // 双击时触发的事件
            total.on('dblclick', function (e) {
				img.stop(); // 停止之前的动画

				// 获取total的偏移量和点击位置
				var totalOffset = total.offset();
				var clickX = e.pageX - totalOffset.left;
				var clickY = e.pageY - totalOffset.top;

				// 获取当前角色的位置和目标位置
				var currentX = parseInt(img.css('left'));
				var targetX = clickX - img.width() / 2;

				// 判断目标位置与当前位置，决定使用哪张大招图片
				if (targetX < currentX) {
					$("img").attr("src","playerbig_left.gif");
				} else {
					$("img").attr("src","playerbig_right.gif");
				}
				// 角色移动动画和大招动画
				img.animate({ top: clickY - img.height() / 2, left: clickX - img.width() / 2 }, 1500, function () {
					// 动画完成后恢复到原始方向图片
					if (targetX < currentX) {
						$("img").attr("src","player_left.gif");
					} else {
						$("img").attr("src","player_right.gif");
					}
				});
			});
		});
    </script>
</body>
</html>